<template>
	<view class="page">
		<view style="position: relative">
			<!--   <swiper class="v-qm-banner" style="height:290px" :autoplay="true" circular :indicator-active-color="indicatorStyle" :data-index="currentIndex" @change="swiperChange">
        <swiper-item class="swiper-item" v-for="(item2, index2) in swiperImgs" :key="index2">
          <view catchtap="bindLink" :data-item="item2">
            <image lazy-load mode="widthFix" class="image" :src="item2.img"></image>
          </view>
        </swiper-item>
      </swiper> -->
			<view class="home">
				<swiper circular indicator-dots autoplay interval="3000" duration="500">
					<!-- v-for循环遍历数组 -->
					<swiper-item v-for="(item,index) in swipers" :key="index" @click="goHuoDong(index)">
						<image :src="item" class="lunbo"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="container">
			<view class="header">
				<text class="title">{{name}}</text>
				<view class="info">
					<text class="servings">1人份</text>
				</view>
				<view class="rating">
					<text class="rating-text">至减推荐</text>
				</view>
			</view>
			<view class="details">
				<view class="tab">
					<text class="tab-text">详情</text>
				</view>
				<view class="detail-content">
					<text class="detail-text">
						套餐内容：{{name}}
						其他说明：特惠价仅限月卡，如遇门店该产品售罄，请以门店实际提供为准。
					</text>
					<view class="ingredients">
						<text>主料：</text>
						<text>{{content}}</text>
					</view>
					<view class="portion">
						<text>份量：</text>
						<text>1人份</text>
					</view>
				</view>
			</view>
		</view>
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	import loginVue from '../login/login.vue';
	import {
		url
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				image: [],
				currentIndex: 0,
				swiperImgs: [],
				allPrice:700,
				options: [{
						icon: 'headphones',
						text: '客服'
					}
				],
				buttonGroup: [{
					text: '立即购买 ￥700',
					backgroundColor: '#ffa200',
					color: '#fff'
				}],
				name: '',
				content: '',
				swipers: [
					'https://zjdemo.xuande.work:8889/photo/8ebc0aed9c8241e3ac634f9d0f28a3d8.jpg',
					'https://zjdemo.xuande.work:8889/photo/0bc53f5395c7405082e0b4b9ffb3c420.jpg',
					'https://zjdemo.xuande.work:8889/photo/901eb56d3b434cc3a3d3dac94ff683cf.jpg',
					'https://zjdemo.xuande.work:8889/photo/0bc53f5395c7405082e0b4b9ffb3c420.jpg',
					'https://zjdemo.xuande.work:8889/photo/8c915f775b6e4652ba9353608aa9dc13.jpg',
					
				

				],
			};
		},
		onLoad(options) {
			this.name = options.name;
			this.content = options.content;
			if (options.image) {
				this.image = Array.isArray(options.image) ? options.image : [options.image];
				this.swiperImgs = this.image.map((img, index) => ({
					index: index + 1,
					img: img
				}));
			}
		},
		methods: {
			swiperChange(current) {
				this.currentIndex = current.detail.current;
			},
			onClick(e) {
				console.log(e.content.text)
				// uni.showToast({
				//   title: `点击${e.content.text}`,
				//   icon: 'none'
				// });
				if (e.content.text === '客服') {
					uni.navigateTo({
						url: '../yaoqingyouli/yaoqingyouli'
					})
				} else if (e.content.text === '店铺') {
					uni.navigateTo({
						url: '../yaoqingyouli/yaoqingyouli'
					})
				}
			},
			buttonClick(e) {

				if (e.content.text === '立即购买 ￥700') {
					const that = this
					uni.getStorage({
						key: 'openId',
						success(res) {
							that.getOpenId = res.data
							// console.log("你好" + that.getOpenId)
							// console.log(res.data)
							uni.request({
								url: url + '/foodCombo/selectMyMember',
								method: 'GET',
								data: {
									openId: res.data
								},
								success: (Res) => {
									console.log(Res.data.message);
										if(Res.data.message==='您还没有开通周卡或月卡哦~') {
											
											uni.getStorage({
												key: 'address',
												success(res) {
											    if(res.data===''){
													uni.showModal({
														title: '提示',
														content: '请授权公寓完整信息，购买更方便',
														confirmText: '确定',
														success: function(res) {
															if (res.confirm) {
																uni.navigateTo({
																	url: '../goxiugai/goxiugai'
																})
															} else if (res.cancel) {
																console.log('用户点击取消');
															}
														}
													})
												}
												else if(res.data!==''){
													uni.navigateTo({
														url: '../YueKaOrders/YueKaOrders?allPrice=700'
													})
												}
												}
											})
											
										// console.log("八年");
										// 	uni.navigateTo({
										// 		url: '../YueKaOrders/YueKaOrders?allPrice=700'
										// 	})
										}	
									else if(Res.data.message==='查询成功'){
									uni.showModal({
										title: '提示',
										content: '你已经是会员用户，请下次购买',
										confirmText: '确定',
										success: function(res) {
											// if (res.confirm) {
											// 	console.log('用户点击确定');
											// } else if (res.cancel) {
											// 	console.log('用户点击取消');
											// }
										}
									})	
									}
								}
							});

						},
						fail(err) {
							console.error('Failed to get storage:', err)
						}
					})


				} else if (e.content.text === '点击购物车') {
					console.log(111)
				}
			}
		}
	};
</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.v-qm-banner {
		z-index: 999;
		background: transparent;

		.image {
			width: 100%;
		}

		.qm-banner-swiper-item {
			position: relative;
		}

		.underImg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 390rpx;
		}

		.qm-banner-swiper-item-box {
			background-size: cover;
			opacity: 0;
			transition-property: opacity;
		}
	}

	.qm-banner-underImg {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	}

	.uperUderImg {
		width: 100%;
		height: 100%;
	}

	.aaaa {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		transform: translate(0%, 0) translateZ(0);
		transition: 1s;
	}

	.container {
		background-color: white;
		padding: 16px;
		font-family: Arial, sans-serif;
		flex: 1;
		overflow-y: auto;
	}

	.header {
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.info {
		display: flex;
		align-items: center;
		margin-top: 4px;
	}

	.servings {
		font-size: 14px;
		color: #888;
		margin-right: 8px;
	}

	.flavor {
		font-size: 14px;
		color: #f00;
		background-color: #ffebee;
		padding: 2px 4px;
		border-radius: 4px;
	}

	.rating {
		margin-top: 4px;
	}

	.rating-text {
		font-size: 14px;
		color: #f90;
	}

	.sold {
		margin-top: 4px;
	}

	.select-spec {
		margin-top: 16px;
		display: flex;
		justify-content: flex-end;
	}

	.spec-button {
		background-color: #ff9900;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		font-size: 16px;
	}

	.details {
		margin-top: 16px;
	}

	.tab {
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.tab-text {
		padding: 8px 16px;
		font-size: 16px;
		color: #000;
	}

	.detail-content {
		padding: 16px 0;
	}

	.detail-text {
		font-size: 14px;
		color: #555;
	}

	.ingredients,
	.portion {
		margin-top: 8px;
	}

	.ingredients text,
	.portion text {
		font-size: 14px;
		color: #555;
	}

	.home {
		swiper {
			margin-top: 6px;
			height: 300px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	uni-goods-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 1000;
	}
</style>